<template>
    <!-- 已签署合同 -->
    <div class="gd-main" style="background-color:#fff;z-index:100;">
        <div class="clearfix">
            <el-tag style="font-size:20px;height:40px;line-height:38px;">项目: {{projectName}}</el-tag>
            <el-tag style="font-size:20px;height:40px;line-height:38px;margin:0 20px;">班组长：{{$route.query.partyBName}}</el-tag>
            <el-tag style="font-size:20px;height:40px;line-height:38px;">已签该项目合同总数：{{$route.query.dataTotal}}</el-tag>
        </div>
        <!-- table表格 -->
        <!-- 
            @表格配置
                1. <el-table> 标签
                    1.1 :data - "tableData"
                        1.1.1 tableData 为对象数组，拿到服务器器的数据进行赋值
                        1.1.2 tableData 要在 data() 方法返回的 对象里配置，初始值设置为 [] 空数组
                2. <el-table-column> 标签
                    2.1 prop - "projectName" 列的属性名， tableData 里的对象的属性 
                    2.2 lable - "项目" 列的名称
                    2.3 width - "360" 列的宽度
        -->
        <!-- 
            height: 100vh   - 70px(面包屑+底部滚动条) 
                            - 20px(上内填充)
                            - 40px(标签)
                            - 20px(表格上外间距)
                            -52px(底部页码)
        -->
        <el-table style="margin-top:20px;" :data="tableData" height="calc(100vh - 202px)">
            <el-table-column prop="contractId" label="合同编号" width="300"></el-table-column>
            <el-table-column prop="partyAName" label="发包单位" width="260"></el-table-column>
            <el-table-column prop="contractStatus" label="状态" width="140">
                <template slot-scope="scope">{{ scope.row.contractStatus | contractStatus }}</template>
            </el-table-column>
            <el-table-column prop="detailsTimeInfo.createTime" label="签订完成时间" width="220"></el-table-column>
            <el-table-column width="200" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="detail(scope.row)">查看合同文本</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!--
            @分页配置
                :total - pagination.total 总条数
                :pager-count="7"显示的页码按钮数量, 大于等于 5 <= 21 基数
                :current-page = "pagination.currentPage" 当前的选中的页码
                :page-size="10" 每页显示的条目数
                :page-sizes="" 可选则的每页显示的条目数
                layout="total, sizes, prev, pager, next, jumper" 显示的元素
                @size-change="handleSizeChange"  - handleSizeChange 每页的条数改变时触发，参数为选择的条数
                @current-change="handleCurrentChange" - handleCurrentChange methods 配置 参数为点击的页码，或者输入的页码  
        -->
        <el-pagination 
            style="margin-top:20px;" 
            :total="pagination.total"
            :pager-count="pagination.pageCount"
            :current-page="pagination.currentPage" 
            :page-sizes="pagination.pageSizes" 
            :page-size="pagination.pageSize" 
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange"
            >
        </el-pagination>
        <!-- pdf 预览 -->
        <pdf-view v-show="showpdf" :topoffset="60" :pdfurl="pdfurl">
            <!-- 顶部栏的内容 -->
            <el-row :gutter="20" style="text-align:center;padding:20px 0;background-color:#fff;position:absolute;left:0;top:0;right:0;background-color:#fff;">
                <div v-for="item in contractInfo" style="height:40px;line-height:40px;">
                    <span style="margin:0 20px;">班组长: {{item.partyBName}}</span>
                    <span style="margin:0 20px;">发包单位: {{item.partyAName}}</span>
                    <span style="margin:0 20px;">合同编号: {{item.contractId}}</span>
                    <el-button @click="closePreview">返回</el-button>
                </div>
            </el-row>
        </pdf-view>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    import {contractList,contractDetail} from '@/request/team';
    //引入 pdf预览组件
    import pdfView from '@/views/contract/components/pdfViewIframe';
    
    export default {
        //存储 projectId
        beforeRouteEnter(to,from,next){
            next(vm => {
                vm.projectId = vm.$route.query.projectId;
                vm.projectName = vm.$route.query.projectName;
                vm.contractList();
            });
        },
        components:{
            pdfView  
        },
        data(){
          return {
              contractId:'',
              showpdf:false,
              pdfurl:'',
              contractInfo:[],
              projectName:'',
              projectId:'',
              tableData:[]
          }
        },
        computed:{
            //登录后的数据在这里进行给实例赋值，就可以用 this.xxx 进行访问了
          ...mapGetters(['userId','currId','roleId','verificationStatus'])  
        },
        methods: {
            //关闭 pdf 预览
            closePreview(){
                this.showpdf = false;
            },
            //切换每页显示的数量量
            handleSizeChange(pageSize) {
                console.log('每页显示' + pageSize + '条数据');
                this.pagination.pageSize = pageSize;
                this.contractList({limit:pageSize});
            },
            //选中的页码
            handleCurrentChange(currentPage) {
                console.log('点击了第 ' + currentPage + '页');
                this.pagination.currentPage = currentPage;
                this.contractList({page:currentPage});
            },
            //合同详情
            detail(curRow){
                console.log('合同',curRow);
                let params = {
                    contractId:curRow.contractId
                };
                //查询合同
                this.contractDetail(params);
            },
            //合同详情
            contractDetail(queryObj){
                return contractDetail(queryObj).then(res => {
                    console.log('合同:',res);
                    //获取对象
                    this.contractInfo = res.data.result;
                    this.pdfurl = res.data.result[0].detailsUrlInfo.contractUrl;
                    this.showpdf = true;
                });
            },
            // 接口11：已签订合同列表
            contractList(queryObj = {}){
                /*
                    @param
                            queryObj 用来动态替换查询参数
                            
                */
                let params = { 
                    userId:this.userId,
                    //当前页
                    page:this.pagination.currentPage,
                    //每页显示的条数
                    limit:this.pagination.pageSize,
                    //合同状态 - 已签订
                    contractType:3,
                    //工程 id
                    projectId:this.projectId,
                    //合同类型 - 班组
                    originatorType:1,
                    //请求类型 - 分包
                    sourceType:1
                };
                //参数进行动态拷贝
                Object.assign(params,queryObj);
                return contractList(params).then(res => {
                    //列表数据
                    this.tableData = res.data.result || [];
                    //分页总数据
                    this.pagination.total = res.data.resultTotal || 0;
                });
            }
        }
    }
</script>